<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>旋转中的视差效果</title>
    <Style>
      .container{
        width: 300px;
        height: 300px;
        margin: 0 auto;
        margin-top: 100px;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: repeat(3,1fr);
        grid-template:
        "A A B"
        "C D B"
        "C E E";
        gap:4px;
        animation: rotation 8s linear infinite;
      }
      @keyframes rotation{
        to{
            transform: rotate(360deg);
        }
      }
      .item{
        overflow: hidden;
        border: 2px solid;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .item img{
        width:250%;
        height: 250%;
        object-fit: cover;
        animation: rotation2 8s linear infinite;
      }
      @keyframes rotation2{
        to{
            transform: rotate(-360deg);
        }
      }
      .item:nth-child(1){
        grid-area: A;
      }
      .item:nth-child(2){
        grid-area: B;
      }
      .item:nth-child(3){
        grid-area: C;
      }
      .item:nth-child(4){
        grid-area: D;
      }
      .item:nth-child(5){
        grid-area: E;
      }
    </Style>
</head>

<body>
    <!-- <div style="display: flex;">
        <img src="../Resources/sign.jpg" alt="">
        <img src="../Resources/sign.jpg" style="filter: contrast(7);" alt="">
        
    </div> -->
    <div class="container">
        <div class="item">
            <img src="../Resources/6.webp" alt="">
        </div>
        <div class="item">
            <img src="../Resources/6.webp" alt="">
        </div>
        <div class="item">
            <img src="../Resources/6.webp" alt="">
        </div>
        <div class="item">
            <img src="../Resources/6.webp" alt="">
        </div>
        <div class="item">
            <img src="../Resources/6.webp" alt="">
        </div>
    </div>
</body>
</html>